<template>
    <div>
        <!-- 首页轮播图区域 -->
        <el-carousel height="350px">
            <el-carousel-item v-for="item in 4" :key="item">
                <img class="carouselImg" src="../../assets/images/web-banner-1.png" />
            </el-carousel-item>
        </el-carousel>

        <!-- 首页搜索医院区域 -->
        <Search></Search>

        <!-- 底部展示医院的区域 -->
        <div class="hospital">
            <el-row gutter="20">
                <el-col :span="20">
                    <!-- 医院等级区域 -->
                    <Level @getLevel="getLevel"></Level>
                    <!-- 医院地区区域 -->
                    <Region @getRegion="getRegion"></Region>
                    <!-- 展示医院卡片结构 -->
                    <div class="hospitalCard" v-if="hasHospitalArr.length>0">
                            <el-card @click="goDetail(item)" class="box-card item" shadow="hover" v-for="(item) in hasHospitalArr" :key="item.id">
                                <div class="content">
                                    <div class="left">
                                        <div class="hospital_name">{{item?.hosname }}</div>
                                        <div class="tip">
                                            <div class="level_card">
                                                <svg t="1706018408681" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="4480" width="16" height="16">
                                                    <path
                                                        d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z"
                                                        fill="#999999" p-id="4481"></path>
                                                    <path
                                                        d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z"
                                                        fill="#999999" p-id="4482"></path>
                                                    <path
                                                        d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z"
                                                        fill="#999999" p-id="4483"></path>
                                                    <path
                                                        d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z"
                                                        fill="#999999" p-id="4484"></path>
                                                </svg>
                                                <span>{{item.param?.hostypeString }}</span>
                                            </div>
                                            <div class="time">
                                                <svg t="1706018490410" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="5732" width="16" height="16">
                                                    <path
                                                        d="M163.2 1000.8c-4.8 0-9.6-1.6-14.4-5.6-8.8-7.2-9.6-21.6-2.4-32l83.2-97.6-4.8-4C120 777.6 60.8 652 60.8 518.4c0-51.2 8.8-102.4 25.6-150.4l1.6-4-3.2-2.4c-40-30.4-63.2-77.6-63.2-127.2 0-88 71.2-160 160-160 44 0 84.8 17.6 114.4 48l3.2 3.2 4-1.6c62.4-32.8 132-48.8 203.2-48.8 71.2 0 144 18.4 208.8 52l4 2.4 3.2-3.2c29.6-32.8 72-51.2 117.6-51.2 88 0 160 71.2 160 160 0 53.6-26.4 103.2-70.4 132.8l-4 2.4 1.6 4c16 46.4 24 95.2 24 145.6 0 134.4-60 260-164.8 344l-4.8 3.2 81.6 97.6c4 4 5.6 9.6 4.8 16-0.8 5.6-3.2 12-8 16-4 3.2-8.8 4.8-15.2 4.8-6.4 0-12.8-2.4-17.6-7.2l-84.8-100-4 2.4c-70.4 43.2-151.2 66.4-233.6 66.4-83.2 0-164-23.2-233.6-66.4l-4-2.4-85.6 100.8c-5.6 2.4-12 5.6-18.4 5.6zM505.6 118.4c-220 0-399.2 179.2-399.2 399.2s179.2 399.2 399.2 399.2 399.2-179.2 399.2-399.2-180-399.2-399.2-399.2z m332.8 0c-28 0-55.2 9.6-76 28.8l-5.6 4.8 5.6 4c59.2 42.4 107.2 99.2 140 164l3.2 6.4 5.6-4.8c26.4-21.6 41.6-54.4 41.6-88 0-64-51.2-115.2-114.4-115.2z m-656.8 0c-63.2 0-114.4 51.2-114.4 114.4 0 32 12.8 60.8 35.2 82.4l5.6 5.6 3.2-6.4c33.6-64 82.4-120.8 142.4-161.6l6.4-4-5.6-4.8c-20.8-16.8-46.4-25.6-72.8-25.6z"
                                                        fill="" p-id="5733"></path>
                                                    <path
                                                        d="M504.8 540c-12.8 0-22.4-9.6-22.4-22.4V259.2c0-12.8 9.6-22.4 22.4-22.4 12.8 0 22.4 9.6 22.4 22.4v236h220c12.8 0 22.4 9.6 22.4 22.4 0 12.8-9.6 22.4-22.4 22.4H504.8z"
                                                        fill="" p-id="5734"></path>
                                                </svg>
                                                <span>每天{{item.bookingRule?.releaseTime}}放号</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <img :src="`data:image/jpeg;base64,${item?.logoData}`" />
                                    </div>
                                </div>
                            </el-card>
                    </div>
                    <el-empty v-else description="暂无数据" /> 
                    <!-- 分页器组件 -->
                    <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[10, 20, 30, 40]"
                        :background="true" :small="false" layout=" prev, pager, next, jumper,->, sizes,total" :total="total"
                        style="margin-bottom: 20px"  @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
                </el-col>

                <el-col :span="4">
                    <Tip></Tip>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
// 引入接口
import { reqHospital } from '@/api/home/index'
// 引入ts类型
import { HospitalResponseData,Content, Hospital } from '@/api/home/type'
import { ElMessage } from "element-plus";
// 引入level组件
import Level from "./level/index.vue";
// 引入regin组件
import Region from "./region/index.vue";
// 引入search组件
import Search from "./search/index.vue";
// 引入tip组件
import Tip from './tip/index.vue'
// 引入路由器
import { useRouter } from "vue-router";

// 创建路由器对象
let router = useRouter();
// 默认分页器页码
let pageNo = ref<number>(1);
// 默认一页放几个数据
let limit = ref<number>(10);
// 总数
let total = ref<number>(0);
// 存储医院信息的数组
let hasHospitalArr = ref<Content>([])
// 存储医院的等级
let hostype = ref<string>('')
// 存储医院的地区
let districtCode = ref<string>('')

// 组件挂载完毕
onMounted(()=>{
    // 调用方法获取医院数据
    getHospitalInfo();
})
// 封装一个方法:获取医院数据
const getHospitalInfo = async ()=>{
    const result: HospitalResponseData = await reqHospital(pageNo.value,limit.value,hostype.value,districtCode.value)
    if(result.code == 200){
        // 存储医院信息
        hasHospitalArr.value = result.data.content;
        // 存储医院总个数
        total.value = result.data.totalElements;
    }else{
        ElMessage({
            type:'error',
            message:'请求医院数据失败!'
        })
    }
}
// 当前页码发生变化的回调
const handleCurrentChange = ()=>{
    // 重新获取一下医院数据
    getHospitalInfo();
}
// 每一页数量发生变化
const handleSizeChange = ()=>{
    // 重新获取一下医院数据
    getHospitalInfo();
}
// 对level组件的自定义事件
const getLevel = (level:any)=>{
    hostype.value = level
    // 重新获取医院数据
    getHospitalInfo();
}
// 对region组件的自定义事件
const getRegion = (region: any) => {
    districtCode.value = region
    // 重新获取医院数据
    getHospitalInfo();
}
// 点击卡片跳转的医院详情页
const goDetail = (item: Hospital) =>{
    // 进行编程式路由跳转
    router.push({path: '/hospital/register' ,query:{hoscode:item.hoscode }})
}
</script>

<style scoped lang="scss">
.carouselImg {
    width: 100%;
    height: 350px;
}

.hospitalCard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 49%;
        margin-bottom: 20px;
    }
}

.box-card {
    .content {
        display: flex;
        justify-content: space-between;

        .right {
            img {
                width: 60px;
            }
        }

        .left {
            width: 60%;

            .hospital_name {
                font-size: 18px;
            }

            .tip {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;

                .level_card {
                    display: flex;
                    align-items: center;

                    span {
                        margin-left: 5px;
                        font-size: 14px;
                        color: #7f7f7f;
                    }
                }

                .time {
                    display: flex;
                    align-items: center;

                    span {
                        margin-left: 5px;
                        font-size: 14px;
                        color: #7f7f7f;
                    }
                }
            }
        }
    }
}
</style>
